<script setup lang="ts">
import type { IconPathType, PagePathType } from '@/common/constants'

withDefaults(
  defineProps<{
    /** 按钮大小 */
    size: 'base' | 'sm'
    /** 按钮标题 */
    title: string
    /** 按钮跳转链接 */
    url?: PagePathType | string
    /** 按钮图标路径 */
    iconPath?: IconPathType | string
  }>()
  ,
  {
    size: 'base',
  },
)

const emits = defineEmits(['onClick'])
</script>

<template>
  <!-- 按钮组件 -->
  <button
    class="button" :class="{
      'button--sm': size === 'sm',
    }" @click="emits('onClick')"
  >
    <image v-if="iconPath" class="button-icon" :src="iconPath" mode="scaleToFill" />

    <text class="button-text">
      {{ title }}
    </text>
  </button>
</template>

<style scoped lang="scss">
.button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* padding-block: 20rpx; */
  flex: 1;
  background: linear-gradient(0deg, rgba(237, 69, 86, 1) 0%, rgba(237, 69, 86, 1) 65.29%, rgba(247, 148, 158, 1) 100%);
  border-radius: 40rpx;

  &-text {
    color: $color-white;
    font-size: $font-size-base;
  }

  &-icon {
    margin-right: 16rpx;
    height: 40rpx;
    width: 40rpx;
  }
}
</style>
